<template>
    <div class="design-item">
        <div class="design-item-controller">
            <div class="design-item-controller-handle">
                <div class="design-component-notice-preview" :style="{backgroundColor: bgColor , color :color}">
                    <i class="notice-preview-left-icon"></i>
                    <div class="notice-preview-content">{{content ? content : '请填写内容，如果过长，将会在手机上滚动显示'}}</div>
                </div>
            </div>
            <slot name="menu"></slot>
        </div>
        <div class="design-item-editor" v-show="show && !showAddMenuGroup">
            <div>
                <div class="design-item-editor-title">公告</div>

                <div style="margin-bottom:20px">
                    <div class="editor-group" style="margin-bottom:0">
                        <div class="editor-group-label"><em class="group-required-star">*</em>公告：</div>
                        <div class="editor-group-control">
                            <div class="input-wrap">
                            	<input v-model.trim="content" 
                            		@input="bindInput" 
                            		placeholder="请填写内容">
                            </div>
                        </div>
                    </div>
                    <div v-if="enableValid" class="design-editor-control-group-error" style="margin-left: 70px;margin-top: 5px">请填写公告内容</div>
                </div>

                <div class="editor-group">
                    <div class="editor-group-label">背景颜色：</div>
                    <div class="editor-group-control">
                        <el-color-picker v-model="bgColor"></el-color-picker>
                    </div>
                </div>

                <div class="editor-group">
                    <div class="editor-group-label">文字颜色：</div>
                    <div class="editor-group-control">
                        <el-color-picker v-model="color"></el-color-picker>
                    </div>
                </div>

            </div>
        </div>
        <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
    </div>
</template>
<script>
    export default {
        name: "nc-design-item-notice",
        otherInfo: {
            title: '公告',
            type: 'notice',
            group: 2,
            max: 0
        },
        //外部传入参数
        props: {
            show: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default: null
            },
            cid: {
                type: Number
            },
            showAddMenuGroup: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
		        // 背景颜色
		        bgColor: '#fff8e9',
		        // 文字颜色
		        color: '#666666',
		        // 文本内容
		        content: '',
		        enableValid:false
            }
        },
        methods: {
        	bindInput(res){
        		if(!this.content){
        		   this.enableValid=true
        		}else{
        		   this.enableValid=false	
        		}
        	},
            getCurrentData () {            	
            	if(!this.content){
            		this.$message.error('公告内容不能为空');
            		return false
            	}            	
                return {
                    bgColor: this.bgColor,
                    color: this.color,
                    content: this.content,
                    type: 'notice'
                }
            }
        }
    };
</script>